<template>
  <div style="color:red">$subscribe:某个仓库中的数据发生变化触发</div>
  <br>
  
  <div>
    <p>total:{{ total }}</p>
    <p>大total:{{ addBig }}</p>
    <p>学校:{{ school }}</p>
    <p>地址:{{ address }}</p>
  </div>

  <br />

  <div class="option">
    <el-select name="" id="" v-model.number="sum" class="sel">
      <el-option value="1">1</el-option>
      <el-option value="2">2</el-option>
      <el-option value="3">3</el-option>
    </el-select>
    <button @click="add">加</button>
    <!-- actions修改数据 -->
    <button @click="countStore.sub(sum)">减</button>
  </div>

  <hr />
  <div>土味情话</div>
  <button @click="loveTalkStore.addLoveTalk">添加</button>

  <div
    v-for="item in loveTalkStore.loveTalk"
    :key="item.id"
    style="color: red; margin-bottom: 5px"
  >
    {{ item.content }}
  </div>
</template>

<script setup lang="ts" name="pinia">
import { countStore, loveTalkStore } from "../../../stores/allStores";
import { storeToRefs } from "pinia";
// import { toRefs } from "pinia";

const { sum, total, school, address, addBig } = storeToRefs(countStore);

// const sum = ref(1);
const add = () => {
  // countStore.total += sum.value;
  // countStore.school = "555";
  // countStore.address = "北京";

  // 批量变更
  countStore.$patch({
    total: (countStore.total += countStore.sum),
    school: "455",
    address: "北京",
  });
};

countStore.$subscribe((mutate, state) => {
  console.log("count中数据发生了变化", mutate,state);
});
</script>

<style scoped lang="scss">
.option {
  .sel {
    width: 70px;
  }
  display: flex;
}
</style>
